<template>
  <el-card>
    <h3>个人账单管理</h3>
    <el-form inline @submit.native.prevent style="margin-bottom: 16px">
      <el-form-item label="体检编号">
        <el-input v-model="searchNo" placeholder="请输入体检编号" style="width: 200px" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="bills" style="width: 100%">
      <el-table-column prop="examNo" label="体检编号" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="items" label="收费项目">
        <template slot-scope="scope">
          <span v-for="item in scope.row.items" :key="item.code" style="margin-right: 8px">{{ item.name }}</span>
          <el-button type="text" size="mini" @click="openAddItem(scope.row)">添加</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="total" label="总金额" />
    </el-table>
    <el-dialog title="添加收费项目" :visible.sync="showAddDialog" width="400px">
      <el-checkbox-group v-model="selectedItems">
        <el-checkbox v-for="item in allChargeItems" :label="item" :key="item.code">{{ item.name }}（￥{{ item.price }}）</el-checkbox>
      </el-checkbox-group>
      <div slot="footer">
        <el-button @click="showAddDialog = false">取消</el-button>
        <el-button type="primary" @click="confirmAddItem">确定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  name: "Grzdgl",
  data() {
    return {
      searchNo: '',
      bills: [
        {
          examNo: 'TJ2024001',
          name: '张三',
          items: [
            { code: 'SF001', name: '挂号费', price: 10 },
            { code: 'SF002', name: '体检费', price: 100 },
          ],
          total: 110,
        },
        {
          examNo: 'TJ2024002',
          name: '李四',
          items: [
            { code: 'SF002', name: '体检费', price: 100 },
          ],
          total: 100,
        },
      ],
      allChargeItems: [
        { code: 'SF001', name: '挂号费', price: 10 },
        { code: 'SF002', name: '体检费', price: 100 },
        { code: 'SF003', name: '材料费', price: 5 },
      ],
      showAddDialog: false,
      selectedItems: [],
      currentBill: null,
    };
  },
  methods: {
    onSearch() {
      if (!this.searchNo) {
        this.$message.warning('请输入体检编号');
        return;
      }
      // 模拟搜索
      this.bills = this.bills.filter(bill => bill.examNo.includes(this.searchNo));
    },
    openAddItem(bill) {
      this.currentBill = bill;
      this.selectedItems = [];
      this.showAddDialog = true;
    },
    confirmAddItem() {
      if (this.currentBill && this.selectedItems.length) {
        this.currentBill.items.push(...this.selectedItems);
        this.currentBill.total = this.currentBill.items.reduce((sum, item) => sum + item.price, 0);
        this.$message.success('添加成功');
      }
      this.showAddDialog = false;
    },
  },
};
</script> 